"use client";

import React from "react";
import { useLanguage } from "~/lib/LanguageContext";
import Link from "next/link";

export default function DockerSetup() {
  const { t, language } = useLanguage();

  return (
    <div className="relative">
      <div className="absolute top-4 left-4">
        <Link href="/" className="inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-2">
            <path d="M15 18l-6-6 6-6" />
          </svg>
          {language === 'zh' ? '返回首页' : 'Back to Home'}
        </Link>
      </div>
      
      <div className="container mx-auto max-w-4xl px-4 py-8">
        <h1 className="mb-8 text-center text-3xl font-bold">
          {language === 'zh' ? 'Docker 极简安装指南' : 'Simple Docker Setup Guide'}
        </h1>
        
        <div className="mb-10 rounded-lg border border-blue-100 bg-blue-50/30 p-6 dark:border-blue-900/30 dark:bg-blue-900/10">
          <div className="mb-4 flex items-center text-blue-600 dark:text-blue-400">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" className="mr-2">
              <path d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8" stroke="currentColor" strokeWidth="2" />
              <circle cx="9" cy="6" r="1" fill="currentColor" />
              <circle cx="15" cy="6" r="1" fill="currentColor" />
            </svg>
            <h2 className="text-xl font-semibold">
              {language === 'zh' ? '一行命令启动整个应用' : 'Run the Entire Application with One Command'}
            </h2>
          </div>
          <p className="text-gray-700 dark:text-gray-300">
            {language === 'zh' 
              ? 'Docker让复杂的应用部署变得简单。无需关心依赖、环境配置和版本冲突，使用Docker可以一键启动整个CodeMariner，所有组件（前端、后端、数据库）都会自动配置并完美协同工作。' 
              : 'Docker simplifies complex application deployment. Without worrying about dependencies, environment setup, or version conflicts, you can start the entire CodeMariner with a single command, and all components (frontend, backend, database) will be automatically configured and work together seamlessly.'}
          </p>
        </div>

        <div className="mb-8 grid gap-8 md:grid-cols-2">
          <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
            <h3 className="mb-4 text-lg font-medium">
              {language === 'zh' ? '安装 Docker' : 'Install Docker'}
            </h3>
            <div className="space-y-4">
              <div>
                <h4 className="mb-2 font-medium">Windows</h4>
                <div className="rounded-md bg-gray-100 p-3 dark:bg-gray-800">
                  <a href="https://docs.docker.com/desktop/install/windows-install/" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline dark:text-blue-400">
                    {language === 'zh' ? '下载 Docker Desktop for Windows' : 'Download Docker Desktop for Windows'}
                  </a>
                </div>
              </div>
              <div>
                <h4 className="mb-2 font-medium">macOS</h4>
                <div className="rounded-md bg-gray-100 p-3 dark:bg-gray-800">
                  <a href="https://docs.docker.com/desktop/install/mac-install/" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline dark:text-blue-400">
                    {language === 'zh' ? '下载 Docker Desktop for Mac' : 'Download Docker Desktop for Mac'}
                  </a>
                </div>
              </div>
              <div>
                <h4 className="mb-2 font-medium">Linux</h4>
                <div className="rounded-md bg-gray-100 p-3 dark:bg-gray-800">
                  <code className="text-sm">
                    {language === 'zh' 
                      ? 'curl -fsSL https://get.docker.com | sh' 
                      : 'curl -fsSL https://get.docker.com | sh'}
                  </code>
                </div>
              </div>
            </div>
          </div>

          <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
            <h3 className="mb-4 text-lg font-medium">
              {language === 'zh' ? 'CodeMariner 一键启动' : 'One-Click CodeMariner Setup'}
            </h3>
            <div className="space-y-4">
              <p className="text-gray-700 dark:text-gray-300">
                {language === 'zh' 
                  ? '下载并运行启动脚本，即可一键部署完整的CodeMariner：' 
                  : 'Download and run the starter script to deploy the complete CodeMariner with one click:'}
              </p>
              <div>
                <h4 className="mb-2 font-medium">Windows</h4>
                <div className="rounded-md bg-gray-100 p-3 dark:bg-gray-800">
                  <span className="text-sm">
                    {language === 'zh' ? '1. 下载 codemariner-gitee-starter.bat' : '1. Download codemariner-gitee-starter.bat'}
                  </span><br/>
                  <span className="text-sm">
                    {language === 'zh' ? '2. 双击运行文件' : '2. Double-click to run the file'}
                  </span>
                </div>
              </div>
              <div>
                <h4 className="mb-2 font-medium">macOS / Linux</h4>
                <div className="rounded-md bg-gray-100 p-3 dark:bg-gray-800">
                  <code className="text-sm">
                    {language === 'zh' 
                      ? 'curl -o starter.sh https://gitee.com/xieliangcai-wuxi/codemariner/raw/main/codemariner-gitee-starter.sh && chmod +x starter.sh && ./starter.sh' 
                      : 'curl -o starter.sh https://gitee.com/xieliangcai-wuxi/codemariner/raw/main/codemariner-gitee-starter.sh && chmod +x starter.sh && ./starter.sh'}
                  </code>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="rounded-lg border border-green-100 bg-green-50/30 p-6 dark:border-green-900/30 dark:bg-green-900/10">
          <h3 className="mb-4 flex items-center text-green-600 dark:text-green-400 text-lg font-medium">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-2">
              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
              <polyline points="22 4 12 14.01 9 11.01"></polyline>
            </svg>
            {language === 'zh' ? '为什么选择Docker？' : 'Why Choose Docker?'}
          </h3>
          <ul className="space-y-2 text-gray-700 dark:text-gray-300">
            <li className="flex items-start">
              <span className="mr-2 text-green-500">•</span>
              <span>
                {language === 'zh' ? '极简配置 - 无需手动安装各种依赖和工具' : 'Minimal Configuration - No need to manually install various dependencies and tools'}
              </span>
            </li>
            <li className="flex items-start">
              <span className="mr-2 text-green-500">•</span>
              <span>
                {language === 'zh' ? '隔离环境 - 不会影响您的系统环境和其他应用' : 'Isolated Environment - Will not affect your system environment or other applications'}
              </span>
            </li>
            <li className="flex items-start">
              <span className="mr-2 text-green-500">•</span>
              <span>
                {language === 'zh' ? '一致性体验 - 在任何平台都能获得相同的运行结果' : 'Consistent Experience - Get the same running results on any platform'}
              </span>
            </li>
            <li className="flex items-start">
              <span className="mr-2 text-green-500">•</span>
              <span>
                {language === 'zh' ? '一键启动 - 简单的脚本自动完成所有配置' : 'One-Click Startup - Simple scripts automatically complete all configurations'}
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
} 